@import "../common/global";

@mixin item {
  height: 45px;
  line-height: 45px;
  font-size: 14px;
  padding: 0 10px;
  list-style: none;
  box-sizing: border-box;
  transition: border-color .3s,background-color .3s,color .3s;
  cursor: pointer;
}

.bbq-menu {
  color: #303133;
  padding: 5px;
  box-sizing: border-box;
  transition: width .3s;
  border-right: 1px solid mix(#ffffff,$normalThemeColor,70%);
  min-height: 400px;
  list-style: none;
  margin: 0;

  //单项的
  .bbq-menu-item {
    .title {
      @include item;
      white-space: nowrap;
      &:hover {
        background-color: mix(#ffffff,$normalThemeColor,70%);
      }
      &.active {
        color: $normalThemeColor;
      }
    }
  }

  //可伸缩的
  .bbq-menu-sub {
    .title {
      @include item;
      display: flex;
      justify-content: space-between;
      .name {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        &.active {
          color: $normalThemeColor;
        }
      }
      .arrow {
        transition: transform .2s;
        &.reverse {
          transform: rotate(180deg);
        }
      }

      &:hover {
        background-color: mix(#ffffff,$normalThemeColor,70%);
      }
    }
    .sub-menu-list  {
      margin: 0;
      padding-left: 10px;
      list-style: none;
      transition: all .3s;
      overflow: hidden;
    }
  }
}